<template>
    <div class="newsong">
     <h1>分类推荐</h1>
        <div class="wrapper" ref="wrapper">
          <ul class="content" ref="content">
            <li v-for="item in newsongData" :key="item.id">
              <div class="cover-num">
              <img :src="item.cover_url_big" alt="">
                           <span>{{item.title}}</span>
                       </div>
               <span>{{item.title}}</span>
          
            </li>
          </ul>
    </div>
    </div>
</template>
<script>
import axios from 'axios'//导入axios
import BScroll from "better-scroll";
export default{
    data(){
        return{
            newsongData:[

            ]
        }
    },
  methods:{
    getnewsong(){
         axios.get("/api/recommend/playlist")
         
      .then(res => {
        console.log(res.data.data.list)
        this.newsongData=res.data.data.list;
        this.betterScrollHorizontal(this.newsongData.length,160)
      })
      // 抛出异常
      .catch(err => {
        console.error(err); 
      })
    },
    betterScrollHorizontal(num,itemWidth){
       let width=num*itemWidth;
       this.$refs.content.style.width= width +"px";
       this.$nextTick(()=>{
      this.scroll = new BScroll(this.$refs.wrapper, {
          click: true,
          startX: 0,
          scrollX: true,//横向为true
          scrollY: false,
        })
    });
  }
  },
  mounted(){
      this.getnewsong();      
  },
};
</script>
<style scoped>
.newsong{
  width: 100%;
  margin: 0 auto;
}
.newsong>h1{
font-size: 18px;
text-align: left;
margin-left: 20px;
}
.wrapper{
  width: 90%;
  overflow: hidden;/* 超出部分隐藏 */
  margin-left: 22px;
  
}
  .my-swipe .van-swipe-item img{
   width: 90%;
   border-radius: 20px; 
   margin: 0 auto;
  }
  ul.content>li{
     width: 160px;
     display: inline-block;
     vertical-align: top;
     text-align: center;
  }
  ul.content>li img{
     width: 90%;
     border-radius: 20px; 
  }
 ul.content>li>span{
     width: 90%;
     display: block;
     font-size: 12px;
     margin: 0 auto;
  
  }
  .cover-num{
    position: relative;
  }
  .cover-num>span{
    position: absolute;
    display: block;
    right: 10px;
    bottom: 3px;
     z-index: 100;
     background-color: #d1d7d8a9;
     border-radius: 20px;
     width: 100px;
  }

</style>
